<template>
  <!-- 产品分类 -->
  <div class="app-container">
    <custom-container ref="customContainerRef" :config="mainConfig" />
    <!-- 新增或修改产品信息 -->
    <setForm
      ref="setFormRef"
      v-model:title="title"
      v-model:open="open"
      @changeList="handleQuery"
    />
  </div>
</template>
<script lang="ts" setup>
import {
  Delete,
  Plus,
  Edit,
} from '@element-plus/icons-vue'
import { ref, defineAsyncComponent, computed } from 'vue'
import { ElMessage, ElMessageBox, ElButton } from 'element-plus'
// import useDict, { DictDirection } from '@/store/modules/dicts'
import { DictDirection } from '@/store/modules/dicts'
import { listClassify, delClassify } from '@/api/basicConfig/productsClassify'
// import {useDicts} from '@/utils'

// const dictOption = useDict()
// const a = computed(() => dictOption.getDictLabel({ dict: DictDirection.客户 })) 
// watchEffect(() => {
//   console.log(a.value)
// })
const setForm = defineAsyncComponent(() => import('./components/setForm.vue'))
let // 查询参数
  queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    classifyName: null,
    status: null,
    remark: null,
    productsGroupName: null,
  }),
  // 选中数组
  ids = [],
  // 非单个禁用
  single = ref(true),
  // 非多个禁用
  multiple = ref(true),
  //
  customContainerRef = ref(null),
  title = ref(' '),
  open = ref(false),
  // 新增终端
  setFormRef = ref(null)
// 查询
const handleQuery = () => {
  // queryParams.value.pageNum = 1
  customContainerRef.value.getList()
}
// 多选框选中数据
const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  const rowList = JSON.parse(JSON.stringify(rows))
  ids = rowList.map((el) => el.id)
  single.value = rows.length != 1
  multiple.value = !rows.length
}
/** 新增按钮操作 */
const handleAdd = () => {
  open.value = true
  title.value = '添加产品分类'
}
/** 修改按钮操作 */
const handleUpdate = (row: { [key: string]: any }) => {
  const rowList = JSON.parse(JSON.stringify(row))
  open.value = true
  const id = rowList.id || ids
  title.value = '修改产品分类'
  setFormRef.value.getList(id)
}
/** 删除按钮操作 */
const handleDelete = (row: { [key: string]: any }) => {
  const rowList = JSON.parse(JSON.stringify(row))
  const id = rowList.id || ids
  ElMessageBox.confirm(
    `"是否确认删除产品编号为"${ id }"的数据项?"`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
  .then(() => delClassify(id))
  .then((res) => {
    if (res.code === 200) {
      handleQuery()
      ElMessage.success('删除成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
  .catch((error) => {
    if (error == 'cancel') {
      ElMessage.error(error)
    }
  })
}
const mainConfig = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '分类名称',
            prop: 'classifyName',
            option: {
              placeholder: '请输入分类名称',
            },
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            option: {
              placeholder: '请选择状态',
              dictInfo: {
                dict: DictDirection.通用状态,
              },
            },
          },
          {
            label: '备注',
            prop: 'remark',
            option: {
              placeholder: '请输入备注',
            },
          },
          {
            label: '产品分组名称',
            prop: 'productsGroupName',
            option: {
              placeholder: '请输入产品分组名称',
              dictInfo: {
                dict: DictDirection.产品分组,
              },
            },
          },
        ],
        queryParams: queryParams.value,
      },
      btns: [
        {
          title: '新增',
          icon: Plus,
          // directive: [['hasPermi', ['system:role:add']]],
          onClick: handleAdd,
        },
        {
          title: '修改',
          icon: Edit,
          // directive: [['hasPermi', ['system:client:edit']]],
          onClick: handleUpdate,
          disabled: single.value,
        },
        {
          title: '删除',
          icon: Delete,
          // directive: [['hasPermi', ['system:client:remove']]],
          onClick: handleDelete,
          disabled: multiple.value,
        },
      ],
      table: {
        columns: [
          { type: 'selection', minWidth: '55', align: 'center' },
          {
            label: '分类名称',
            prop: 'classifyName',
            align: 'center',
            minwidth: '60',
          },
          {
            label: '分类代码',
            prop: 'classifyCode',
            align: 'center',
            minWidth: '60',
          },
          {
            label: '状态',
            prop: 'status',
            align: 'center',
            minWidth: '60',
            type: 'select',
            autoFormatter: {
              dict: DictDirection.通用状态,
              rowKey: 'status',             
            },
          },
          {
            label: '产品分组名称',
            prop: 'productsGroupName',
            align: 'center',
            minWidth: '60',
            autoFormatter: {
              dict: DictDirection.产品分组,
              rowKey: 'productsGroupName',             
            },
          },
          {
            label: '备注',
            prop: 'remark',
            align: 'center',
            minWidth: '60',
          },
          {
            label: '操作',
            align: 'center',
            fixed: 'right',
            showOverflowTooltip: false,
            render: (h, params) => {
              const buttons = [
                {
                  title: '修改',
                  icon: Edit,
                  clickFun: handleUpdate,
                  // directive: [['hasPermi', ['system:client:edit']]],
                },
                {
                  title: '删除',
                  icon: Delete,
                  clickFun: handleDelete,
                  // directive: [['hasPermi', ['system:client:remove']]],
                },
              ]
              return buttons.map((el) => h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  icon: el.icon,
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              ))
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleSelectionChange(rows)
          },
        },
      },
      api: listClassify,
    }
  },
  set(v) {
    return v
  },
})
</script>
